<template>
  <el-scrollbar style = "height: 80vh">
    <div style = "padding: 10px 30px">
      <el-row :gutter = "20">
        <!--表单容器-->
        <el-col :span = "12">
          <!--标题-->
          <h1 style = "margin-bottom: 30px">编辑歌单信息</h1>
          <!--表单内容-->
          <div style = "width: 100%;">
            <el-form :model = "formData">
              <!--歌单名字-->
              <el-form-item label = "歌单名">
                <el-input v-model = "formData.user" placeholder = "请输入歌单名" />
              </el-form-item>
              <!--标签列表-->
              <el-form-item label = "标签">
                <add-tags :nav-list = "navList" />
              </el-form-item>
              <!--简介-->
              <el-form-item label = "简介">
                <el-input
                    v-model = "formData.textarea2"
                    :autosize = "{ minRows: 2, maxRows: 4 }"
                    type = "textarea"
                    placeholder = "Please input"
                />
              </el-form-item>
              <!--提交和取消-->
              <el-form-item>
                <el-button class = "add-playlist" @click = "onSubmit">Query</el-button>
                <el-button>Cancel</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!--歌单封面-->
        <el-col :span = "12">
          <div class = "column-center-container">
            <el-image style = "width: 200px; margin: 30px 0" :src = "logo" />
            <el-button>修改封面</el-button>
          </div>

        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {reactive} from "vue";
import logo from '@/assets/logo.png'
import AddTags from "@/views/EditPlayListInfo/AddTags";

//表单收集数据
const formData = reactive({
  user: '',
  region: '',
  textarea2: ''
})
const onSubmit = () => {
  console.log('submit!')
}

//标签列表
const navList = reactive([
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 2,
        category2Name: '华语',
        isSelected: false
      },
      {
        category2Id: 3,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 4,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 5,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 6,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 7,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 8,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 9,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 10,
        category2Name: '华语',
        isSelected: false
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
])

</script>

<style lang = "less" scoped>
.add-playlist {
  border-radius: 10px;
  color: #fff;
  background-color: var(--main-color);

  &:hover {
    color: #fff;
    background-color: #d86767;
  }
}

.el-form-item {
  margin-bottom: 20px;
}


</style>